<!DOCTYPE html>
<html>
<head>
    <title>Products database</title>
    <style type="text/css">
        table {
            width:100%;
            padding:0px;
            border-collapse:collapse;             
        }
        td, th{
            padding:0;
            padding-left:5px;
            border: solid 1px #808080;
            vertical-align:middle;
            text-align:left;
            font-weight:normal;
            font-family:Arial;
            font-size:small;
            color:#3b2f2f;
        }
        thead, tfoot {
            background-color:#ccd1d5;
        }
        th, tfoot {
            height:40px;
            background-image:url(images/first.jpg);
            background-position:left center;
            background-repeat:repeat-x;
            color:#0e0d0d;
        }
        .btn {
            background-image:url(images/filter.png);
            background-position:center center;
            background-repeat:no-repeat;
            cursor: pointer;
            width:22px;
            height:22px;
            margin-left:6px;
        }
        .bt {
            border:0px;
            padding:0px;            
            cursor: pointer;            
            height:22px;
            background-color:transparent;
            color:#3b2f2f;
        }
         .bt:focus {
            border:1px solid #f00;
            padding:0px;            
            cursor: pointer;            
            height:22px;
            background-color:transparent;
            color:#3b2f2f;
        }
        .usd:before {
            content:'$';
        }

    </style>

</head>
<body>
    <table>
        <thead>           
            <tr>                
                <th colspan="6">
                    <label id="th0">Drag a column header and drop it here to group by that column</label>
                </th>                            
            </tr>
            <tr>                
                <th>
                    <label id="th1">ProductID</label>
                </th>
                <th>
                    <label id="th2">Product name</label>
                </th>
                <th>
                    <label id="th3">Unit price</label>
                </th>
                <th>
                    <label id="th4">Quantity per unit</label>
                </th>
                <th>
                    <label id="th5">Units in stock</label>
                </th>
                <th>
                    <label id="th6">Discontinued</label>
                </th>                
            </tr>
            <tr>                
                <th>
                     <input id="in1" type="text" style=" width:50px;"/>
                </th>
                <th>
                     <input id="in2" type="text" style=" width:150px;"/>
                </th>
                <th>
                     <input id="in3" type="text" style=" width:90px;"/>
                     <input id="btn1" type="button"   class="btn"/>
                </th>
                <th>
                     <input id="in4" type="text" style=" width:100px;"/>
                </th>
                <th>
                     <input id="in5" type="text" style=" width:90px;"/>
                     <input id="btn2" type="button"   class="btn"/>
                </th>
                <th>
                     <input id="in6" type="checkbox"/>
                     <input id="btn3" type="button"   class="btn"/>
                </th>                
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2" style="border-right:0; height:40px;">
                    <input type="button" id="btnF1"  class="btn" style="background-image:url(images/first.png);"/>
                    <input type="button" id="btnF2"   class="btn" style="background-image:url(images/previous.png);"/>
                    <input type="button" id="btnF3"   value="1" class="bt"/>
                    <input type="button" id="btnF4"   value="2" class="bt"/>
                    <input type="button" id="btnF5"   value="3" class="bt"/>
                    <input type="button" id="btnF6"   value="4" class="bt"/>
                    <input type="button" id="btnF7"   value="5" class="bt"/>
                    <input type="button" id="btnF8"   value="6" class="bt"/>
                    <input type="button" id="btnF9"   value="7" class="bt"/>
                    <input type="button" id="btnF10"   value="8" class="bt"/>
                    <input type="button" id="btnF11"   value="9" class="bt"/>
                    <input type="button" id="btnF12"   value="10" class="bt"/>
                    ...
                    <input type="button" id="btnF13"   class="btn" style="background-image:url(images/next.png);"/>
                    <input type="button" id="btnF14"   class="btn" style="background-image:url(images/last.png);"/>

                </td>
                <td colspan="2" style="border-right:0;border-left:0; height:40px;">
                    <label for="numberOfpages">Page size</label>
                    <select id="numberOfpages">
                         <option>5</option>
                         <option selected="selected">10</option>
                         <option>15</option>
                         <option>20</option>
                    </select>
                </td>
                <td colspan="2" style="border-left:0; height:40px; text-align:right; padding-right:10px;">
                    <label for="info">335104 items in 33511 pages</label>
                </td>

            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>
                    <label id="tr1cn1">1</label>
                </td>
                <td>
                    <label id="tr1cn2">Chai</label>
                </td>
                <td>
                    <label id="tr1cn3" class="usd">18.00</label>
                </td>               
                <td>
                    <label id="tr1cn4">10 boxes x 20 bags</label>
                </td>
                <td>
                    <label id="tr1cn5">39</label>
                </td>
                <td class="last">
                    <input id="tr1cn6" type="checkbox"/>
                </td>

            </tr>         
            <tr>
                <td>
                    <label id="tr2cn1">2</label>
                </td>
                <td>
                    <label id="tr2cn2">Chang</label>
                </td>
                <td>
                    <label id="tr2cn3" class="usd">19.00</label>
                </td>               
                <td>
                    <label id="tr2cn4">24 - 12 oz bottles</label>
                </td>
                <td>
                    <label id="tr2cn5">17</label>
                </td>
                <td class="last">
                    <input id="tr2cn6" type="checkbox"/>
                </td>

            </tr>    
            <tr>
                <td>
                    <label id="tr3cn1">3</label>
                </td>
                <td>
                    <label id="tr3cn2">Anissed Syrup</label>
                </td>
                <td>
                    <label id="tr3cn3" class="usd">10.00</label>
                </td>               
                <td>
                    <label id="tr3cn4">12 - 550 ml bottles</label>
                </td>
                <td>
                    <label id="tr3cn5">13</label>
                </td>
                <td class="last">
                    <input id="tr3cn6" type="checkbox"/>
                </td>

            </tr> 
                      <tr>
                <td>
                    <label id="tr4cn1">4</label>
                </td>
                <td>
                    <label id="tr4cn2">Chef Anton's Cajun Seasoning</label>
                </td>
                <td>
                    <label id="tr4cn3" class="usd">22.00</label>
                </td>               
                <td>
                    <label id="tr4cn4">48 - 6 oz jars</label>
                </td>
                <td>
                    <label id="tr4cn5">53</label>
                </td>
                <td class="last">
                    <input id="tr4cn6" type="checkbox"/>
                </td>

            </tr>   
              <tr>
                <td>
                    <label id="tr5cn1">5</label>
                </td>
                <td>
                    <label id="tr5cn2">Chef Anton's Gumbo Mix</label>
                    </td>
                <td>
                    <label id="tr5cn3" class="usd">21.35</label>
                </td>               
                <td>
                    <label id="tr5cn4">36 boxes</label>
                </td>
                <td>
                    <label id="tr5cn5">0</label>
                </td>
                <td class="last">
                    <input id="tr5cn6" type="checkbox" checked="checked"/>
                </td>

            </tr>   

              <tr>
                <td>
                    <label id="tr6cn1">6</label>
                </td>
                <td>
                    <label id="tr6cn2">Grandma's Boysenberry Spread</label>
                    </td>
                <td>
                    <label id="tr6cn3" class="usd">25.00</label>
                </td>               
                <td>
                    <label id="tr6cn4">12 - 18 oz jars</label>
                </td>
                <td>
                    <label id="tr6cn5">120</label>
                </td>
                <td class="last">
                    <input id="tr6cn6" type="checkbox"/>
                </td>

            </tr> 

              <tr>
                <td>
                    <label id="tr7cn1">7</label>
                </td>
                <td>
                    <label id="tr7cn2">Uncle Bob's Organic Dried Pears</label>
                    </td>
                <td>
                    <label id="tr7cn3" class="usd">30.00</label>
                </td>               
                <td>
                    <label id="tr7cn4">12 -1 lb pkgs.</label>
                </td>
                <td>
                    <label id="tr7cn5">15</label>
                </td>
                <td class="last">
                    <input id="tr7cn6" type="checkbox"/>
                </td>
            </tr> 
              <tr>
                <td>
                    <label id="tr8cn1">8</label>
                </td>
                <td>
                    <label id="tr8cn2">Nortwoods Cranberry Sauce</label>
                    </td>
                <td>
                    <label id="tr8cn3" class="usd">40.00</label>
                </td>               
                <td>
                    <label id="tr8cn4">12 - 12 oz jars</label>
                </td>
                <td>
                    <label id="tr8cn5">6</label>
                </td>
                <td class="last">
                    <input id="tr8cn6" type="checkbox"/>
                </td>

            </tr> 
              <tr>
                <td>
                    <label id="tr9cn1">9</label>
                </td>
                <td>
                    <label id="tr9cn2">Mishi Cobe Niku</label>
                    </td>
                <td>
                    <label id="tr9cn3" class="usd">97.00</label>
                </td>               
                <td>
                    <label id="tr9cn4">18 - 500 g pkgs.</label>
                </td>
                <td>
                    <label id="tr9cn5">29</label>
                </td>
                <td class="last">
                    <input id="tr9cn6" type="checkbox" checked="checked"/>
                </td>

            </tr> 
              <tr>
                <td>
                    <label id="tr10cn1">10</label>
                </td>
                <td>
                    <label id="tr10cn2">Ikura</label>
                    </td>
                <td>
                    <label id="tr10cn3" class="usd">31.00</label>
                </td>               
                <td>
                    <label id="tr10cn4">12 - 200 ml jars</label>
                </td>
                <td>
                    <label id="tr10cn5">31</label>
                </td>
                <td class="last">
                    <input id="tr10cn6" type="checkbox"/>
                </td>

            </tr> 
       </tbody>
    </table>
</body>
</html>
